<template>
  <div class="echarts">
    <el-card class="box-card left">
        <div ref="myChartLeft" style="height:500px;" />
    </el-card>
    <el-card class="box-card right" >
        <div ref="myChartRight" style="height:500px;"></div>
    </el-card>
  </div>
</template>

<script>
// 全部引入   ECharts
import * as echarts from 'echarts'
// 按需引入   ECharts
// import * as echarts from 'echarts/core'
// import { RadarChart } from 'echarts/charts'
// import { CanvasRenderer } from 'echarts/renderers'

export default {
  mounted() {
    // 第一个图表
  const myChartLeft = echarts.init(this.$refs.myChartLeft)
  const myChartRight = echarts.init(this.$refs.myChartRight)
    myChartLeft.setOption({
      title: {
          text: '价格数量分布'
        },
      legend: {},
      tooltip: {},
      dataset: {
        source: [
          ['product', '公寓', '二手房', '酒店'],
          ['Matcha Latte', 43.3, 85.8, 93.7],
          ['Milk Tea', 83.1, 73.4, 55.1],
          ['Cheese Cocoa', 86.4, 65.2, 82.5],
          ['Walnut Brownie', 72.4, 53.9, 39.1]
        ],

      },
      xAxis: { type: 'category' },
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
    })

     // 第二个图表
    myChartRight.setOption({
      title: {
        text: '房产数量比例'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 1048, name: '公寓' },
            { value: 735, name: '二手房' },
            { value: 580, name: '酒店' },
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.box-card{
  margin-top: 30px;
}
.left{
  float: left;
  margin-right: 20px;
}
.right{
  float: right;
}
.echarts{
    display: flex;
    .box-card{
        flex: 1;
    }
}

img{
    width: 120px !important;
}
</style>
